<template>
	<div>
		<div class="tou">
			< </div>
				<div class="ding"></div>
				<div class="hei">
					<p>商家注册</p>
				</div>
				<form class="form">
					<view class="form-group">

						<input v-model="username" type="text" placeholder="请填写手机号" class="username" />
					</view>
					<view class="form-group">

						<input v-model="password" type="password" placeholder="请输入密码" class="password" />
					</view>
					<view class="form-group jus">

						<input v-model="yan" type="yan" placeholder="请输入验证码" class="yan" />
						<!-- <span class="label" @click="na">获取验证码</span> -->
						<span class="label" @click="sendVerificationCode" :disabled="counting">{{ buttonText }}</span>
					</view>
					<div class="agreement">
						<p>《用户注册协议》</p>
					</div>
					<view class="form-group">

						<button type="button" @click="zhuce"
							:class="{ 'btn1': !isNextButtonRed, 'btn2': isNextButtonRed }">同意以上协议并注册</button>
					</view>
				</form>
		</div>
</template>

<script>
	import {
		request,
		showToast
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				username: '',
				password: '',
				yan: '',
				count: 60, // 初始倒计时秒数
				counting: false, // 是否正在倒计时
				sent: false // 是否已经发送过验证码

			};
		},
		computed: {
			buttonText() {
				return this.counting ? `${this.count}s` : this.sent ? '重新发送验证码' : '发送验证码';
			},
			// 计算属性：检查username和yan是否都有值
			isNextButtonRed() {
				return 	this.counting&&this.username !== '' && this.yan !== '' && this.password !== '';
			}
		},

		methods: {

			sendVerificationCode() {
				// 模拟发送验证码逻辑，实际场景中需要与后端进行通信
				console.log('发送验证码');

				const phoneNumberRegex = /^1[3456789]\d{9}$/;

				if (phoneNumberRegex.test(this.username)) {
					// 启动倒计时
					this.verifyCode()
					this.counting = true;
					this.sent = true;
					const timer = setInterval(() => {
						if (this.count > 0) {
							this.count--;
						} else {
							clearInterval(timer);
							this.counting = false;
							this.count = 60;
						}
					}, 1000);
				} else {
					showToast('请输入正确手机号')
				}

			},
			verifyCode() {
				// 向后端发送请求，验证验证码
				console.log('验证验证码11111');
				var data = {
					mobile: this.username
				}
				console.log(data)

				request('/app/register/sendVerify.do', 'POST', data).then((res) => {


					if (res.code == -1) {
						this.counting=false
						showToast(res.msg)
					}

				}).catch((err) => {
					console.log(err);
				})
			},


			na() {

			},
			zhuce() {
				const data = {
					account: this.username,
					guid: '',
					lat: '0',
					lon: '0',
					networkType: '0',
					password: this.password,
					verifyCode: this.yan
				}
			
				if(	this.counting&&this.username !== '' && this.yan !== '' && this.password !== ''){
					  if (this.password.length < 6 || this.password.length > 14 || !/^[a-zA-Z0-9]+$/.test(this.password)) {						
		
					   request('/app/selfSupplier/register.do', 'POST', data).then((res) => {
					   	console.log(res);
					   	if (res.code == -1) {
					   
					   		showToast(res.msg)
					   	}
					   }).catch((err) => {
					   	console.log(err);
					   })
					  	
						  
					  }else {
						  showToast('新密码长度为6-14位英文、数字组合')
					  }
		
				}
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "register.scss"
</style>